<template>
    <div class="container1">
      <el-icon style="color:rgb(90,105,245);vertical-align: -15%;" :size="25"><User /></el-icon>
      <el-text class="title1">
        用户信息
      </el-text>
      <div class="container2">
        <div class="user-details">
          <div class="user-detail">
            <el-input
              v-model="username"
              placeholder="用户名"
              :disabled="true"
              class="Box1"
            />
          </div>
          <div class="user-detail">
            <el-input
              v-model="password"
              placeholder="密码"
              :disabled="true"
              class="Box1"
            />
          </div>
          <div class="user-detail">
            <el-input
              v-model="email"
              placeholder="邮箱"
              :disabled="true"
              class="Box1"
            />
          </div>
          <div class="user-detail">
            <el-input
              v-model="roleName"
              placeholder="账户类型"
              :disabled="true"
              class="Box1"
            />
          </div>
          <div class="user-detail">
            <el-input
              v-model="membershipExpires"
              placeholder="会员到期时间"
              :disabled="true"
              class="Box1"
            />
          </div>
        </div>
        <div class="user-detail2">
          <el-button type="primary" class="Button1" @click="editProfile">编辑信息</el-button>
          <el-button type="danger" class="Button1" @click="logout">退出账户</el-button>
        </div>
      </div>


      <el-table
        :data="historyRecords"
        style="width: 100%; margin-top: 20px;"
        :border="true"
        :stripe="true"
        empty-text="暂无查询历史记录">
        <el-table-column
          prop="date"
          label="查询日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="query"
          label="查询内容">
        </el-table-column>
      </el-table>
    </div>
  </template>

  <script setup lang="ts">
  import { ref, computed } from 'vue';
  import { useStore } from 'vuex';
  //import axios from 'axios';
  import router from '../router';

  const store = useStore();

  const username = computed(() => store.state.username);
  const password = computed(() => store.state.password);
  const email = computed(() => store.state.email);
  const roleName = computed(() => store.state.role);
  const membershipExpires = computed(() => store.state.membershipExpires);
  const historyRecords = ref([]);

  // const fetchHistory = async () => {
  //     try {
  //         const response = await axios.get('/api/user/history', {
  //             headers: { Authorization: `Bearer ${store.state.token}` }
  //         });
  //         historyRecords.value = response.data;
  //     } catch (error) {
  //         console.error('Failed to fetch history:', error);
  //     }
  // };

  const logout = () => {
      store.commit('clearUserData');
      store.state.username=''
      store.state.token=''
      store.state.role=0
      router.push('/login')
  };

  const editProfile = () => {
      router.push('/edit-profile');
  };

  </script>

  <style scoped>
.container1 {
  border-radius: 20px;
  background-color: white;
  margin: auto;
  padding: 40px;
  width: 1000px;
  margin-top: 80px;
  white-space: nowrap;
}

.title1 {
  font-weight: bold;
  font-size: 25px;
}

.container2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-details {
  margin-bottom: 20px;
}


.user-detail2 {
  display: flex;
  margin-right: 20px; /* 为了增加用户信息项之间的间距，根据需要调整 */

}

.Box1 {
  margin-bottom: 10px;
  width: 90%;
}

.Button1 {
  margin-top: 10px;
  width: 90%; /* 调整按钮宽度 */
}
</style>
